<script lang="ts" setup>
import { defineProps } from 'vue';

defineProps(['ite'])

</script>
<template>
    <div style="display: flex;margin-bottom: 15px;">
        <img style="width: 35%; border-radius: 10%;" :src="ite.img" alt="">
    <div style="margin-left: 20px; display: flex;flex-flow: column wrap;justify-content: space-around;">
        <div><b>{{ ite.name }}</b></div>
        <div>{{ ite.gamemsg }}</div>
        <div>
            <el-tag color="#fff" style="color: red;">{{ ite.type1 }}</el-tag>
            <el-tag color="#fff" style="color: red;">{{ ite.type2 }}</el-tag>
            <el-tag color="#fff" style="color: red;">{{ ite.type3 }}</el-tag>
        </div>
        <div>
            <span style="font-size: 20px;font-weight: bold;color: red;margin-right: 5px;">￥ {{ ite.price }}
            </span><span style="color: gray;"><del>{{ (ite.price / (ite.off / 100)).toFixed(0)
            }}</del></span><el-tag color="red" style="color: #fff;width: 35px;height: 20px;margin-left: 5px;"> {{
    -((1 - ite.off / 100) * 100).toFixed(0) + '%' }}</el-tag>
        </div>
    </div>
    </div>
    
</template>